<script setup>
import { ref } from 'vue';
const markerList = ref([]);
const info = ref({
	longitude: 0,
	latitude: 0
});
const polyline = ref([
	{
		points: [],
		color: '#42b983',
		width: 3
	}
]);
uni.getLocation({
	altitude: true,
	success(e) {
		const { longitude, latitude } = e;
		info.value.latitude = latitude;
		info.value.longitude = longitude;
		polyline.value[0].points = [{ latitude, longitude }];
		markerList.value[0] = {
			id: 1,
			longitude,
			latitude,
			iconPath: '/static/loc/start_loc.png'
		};
	},
	fail(err) {
		console.log(err);
	}
});

function getTo() {
	uni.chooseLocation({
		latitude: info.value.latitude,
		longitude: info.value.longitude,
		success({ name, latitude, longitude, distance }) {
			polyline.value[0].points[1] = { latitude, longitude };
		}
	});
}
</script>

<template>
	<view class="page">
		<db-navbar>地图</db-navbar>
		<map class="flex-1" id="map" :markers="markerList" :scale="20" :polyline="polyline" :latitude="info.latitude" :longitude="info.longitude"></map>
		<view class="flex-dc footer">
			<view class="com-box" style="background-color: red; margin-top: 20rpx">
				<view class="item-box">
					<view class="item">当前位置</view>
					<view class="item" @click="getTo">目的地：</view>
				</view>
			</view>
			<view class="creat">下单</view>
		</view>
	</view>
</template>

<style lang="scss">
.page {
	position: relative;
}
#map {
	width: 100vw;
}
.footer {
	height: 400rpx;
	background-color: #fcfcfc;
	.item {
		padding: 15rpx 0;
		border-bottom: 1px solid red;
	}
	.creat {
		width: calc(100vw - 60rpx);
		height: 80rpx;
		border-radius: 17rpx;
		color: #fff;
		text-align: center;
		line-height: 80rpx;
		background-color: v-bind(mainColor);
		margin: 20rpx auto;
	}
}
</style>
